<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/payOnline.css">
  <style lang="">
    .card-content-inner {
      padding-top: 0;
      padding-bottom: 0;
    }

    #dscbox {
      margin: 0
    }

    .none {
      display: none;
    }
  </style>
  <title>待支付订单</title>
</head>

<body class="payOnline page-group">
  <div class="page">
    <!-- //<header class="bar bar-nav" id="golbalHeader"></header> -->

    <!-- 这里是页面内容区 -->
    <div class="content">
      <!-- <div class="pull-to-refresh-layer">
        <div class="preloader"></div>
        <div class="pull-to-refresh-arrow"></div>
      </div> -->

      <div class="list-block">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">名称</div>
              <div class="item-after" id="name"></div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">合计金额</div>
              <div class="item-after" id="payPrice">

              </div>
            </div>
          </li>
        </ul>
        <div class="card" id="dscbox">
          <div class="card-header">简介</div>
          <div class="card-content">
            <div class="card-content-inner">
              <p id="dsc"></p>
            </div>
          </div>
        </div>
        <div class="card none">
          <div class="card-header">消费奖励积分</div>
          <div class="card-content">
            <div class="card-content-inner">
              <input type="text" placeholder="输入想抵扣的金额" onblur="payOnline.changePay(2,this.value)">
            </div>
          </div>
          <div class="card-footer" id="usableUncachXF">目前共有
            <span class="payValue"></span>积分,可抵扣
            <span class="payPrice"></span>元</div>
        </div>
        <div class="card none">
          <div class="card-header">推荐奖励积分</div>
          <div class="card-content">
            <div class="card-content-inner">
              <input type="text" placeholder="输入想抵扣的金额" onblur="payOnline.changePay(3,this.value)">
            </div>
          </div>
          <div class="card-footer" id="usableCachXF">目前共有
            <span class="payValue"></span>积分,可抵扣
            <span class="payPrice"></span>元</div>
        </div>
        <div class="card none">
          <div class="card-header">余额</div>
          <div class="card-content">
            <div class="card-content-inner">
              <input type="text" placeholder="输入使用余额数" onblur="payOnline.changePay(1,this.value)">
            </div>
          </div>
          <div class="card-footer" id="balance">目前共有余额
            <span class="payPrice"></span>元</div>
        </div>
        <a href="#" class="button button-big button-fill button-success payBut none" onclick="payOnline.payPause()">微信支付</a>
      </div>
    </div>

  </div>
  <!-- 底部 -->
  <!-- <nav class="bar bar-tab" id="golbalFooter"></nav> -->
  <div id="modal">
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title"></div>
        <div class="item-after">
          <span></span>
        </div>
      </div>
    </li>
  </div>
  </div>
  <!-- 标题栏 -->

</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
  var payOnline = (function ($) {
    $.init()
    ST.prototype.switchChange = function () {
      var src = $('.switch').attr('src')
      if (src.match('off')) {
        $('.switch').attr('src', '../image/Switch_on.png')
      } else {
        $('.switch').attr('src', '../image/Switch_off.png')
      }
    }
    var payOnline = new ST({
      golbalHeaderText: '待支付订单',
      golbalHeaderFunc: function () {
        window.history.back()
      },
      params: ['name', 'payPrice', 'dsc'],
      muniList: null,
      pay: {
        order: ""
      },
      order: {
        orderId: '',
        status:1,
        payContent: [{
            payType: "",
            payPrice: "",
          },
          {
            payType: 3,
            payPrice: "",
          },
          {
            payType: 4,
            confKey: "usableUncachXF",
            objDiscount: 0,
            payObjValue: "",
          },
          {
            payType: 4,
            confKey: "usableCachXF",
            objDiscount: 0,
            payObjValue: ""
          },
          {
            payType: 5,
            confKey: "usableCachXF",
            objDiscount: 0,
            payObjValue: ""
          }
        ]
      },
      payContentCash : []


    })
    Array.prototype.forEach.call(['usableUncachXF', 'usableCachXF', 'balance'], function (e) {
      $('#' + e).find('.payPrice').text(0)
      $('#' + e).find('.payValue').text(0)
    })
    payOnline.payPause = function () {
      payOnline.payContentCash = payOnline.order.payContent.map(function (e) {return e})
      payOnline.order.payContent = payOnline.order.payContent.filter(function (e) {
        return e.payPrice
      })
      payOnline.order.payContent = JSON.stringify(payOnline.order.payContent)
      payOnline.pay.order = JSON.stringify(payOnline.order)
      payOnline.http('pay')
    }
    payOnline.changePay = function (ind, value) {
      payOnline.order.payContent[ind]['payPrice'] = value
      if (payOnline.order.payContent[ind].objDiscount) {
        payOnline.order.payContent[ind].payObjValue = parseInt(Number(payOnline.order.payContent[ind].payPrice) /
          Number(payOnline.order.payContent[
            ind].objDiscount))
      }
    }
    payOnline.filterPayType = function (e) {
      var res
      switch (Number(e.payType)) {
        case 1:
          res = "支付宝支付";
          break;
        case 2:
          res = "微信支付";
          break;
        case 3:
          res = "余额支付";
          break;
        case 4:
          res = e.confKey === "usableUncachXF" ? "推荐奖励积分" : "消费奖励积分";
          break;
        case 5:
          res = "次卡支付";
          break;
      }
      return res
    }
    payOnline.pushAjax({
      getOrder: {
        url: '/app/api/private/order/orderInfo',
        data: {
          orderId: payOnline.getLocationSearch('orderId')
        }
      },
      getPay: {
        url: '/app/api/private/pay/userPayList',
        data: {}
      },
      pay: {
        url: '/app/api/private/order/updateOrderPayContent',
        data: payOnline.pay,
      }
    })
    payOnline.pushAjaxSuccess({
      getOrder: function (res) {
        payOnline.order.orderId = res.data.orderInfo.orderId
        payOnline.params.forEach(function (ele) {
          $('#' + ele).text(res.data.orderInfo[ele])
        })
        if (res.data.orderInfo.status === 3) {
          $('.card').removeClass('none')
          $('.payBut').removeClass('none')
        }
        if (res.data.orderInfo.type === 2) {
          $('.card').not('#dscbox').addClass('none')
        }
        if (res.data.orderInfo.status === 1) {
          JSON.parse(res.data.orderInfo.payContent).forEach(function (e) {
            var li = $('#modal li').clone()
            $(li).find('.item-title').text(payOnline.filterPayType(e))
            $(li).find('span').text(e.payPrice)
            $(li).appendTo($('ul'))
          })
        }
      },
      getPay: function (res) {
        payOnline.muniList = res.data.muniList.map(function (e) {
          return e
        })
        payOnline.muniList.forEach(function (e) {
          if (e.confKey) {
            $('#' + e.confKey).find('.payPrice').text(e.payPrice || 0)
            $('#' + e.confKey).find('.payValue').text(e.payObjValue || 0)
          } else {
            $('#' + 'balance').find('.payPrice').text(e.payPrice || 0)
          }
          if (e.payType == 4 && e.confKey === "usableUncachXF") {
            payOnline.order.payContent[2].objDiscount = e.objDiscount
          } else if (e.payType == 4 && e.confKey === "usableCachXF") {
            payOnline.order.payContent[3].objDiscount = e.objDiscount
          }
        })
      },
      pay:function (res) {
        $.toast(res.msg)
        if(res.code === '1') {
          setTimeout(function () {
            window.location.reload()
          },1e3)
        }else {
          payOnline.order.payContent = payOnline.payContentCash.map(function (e) {return e})
        }
      }
    })
    payOnline.http('getOrder')
    payOnline.http('getPay')
    payOnline.render()
    return payOnline
  })($)
</script>

</html>